<template>
  <div
    id="consumptionBar"
    :style="{ height: '420px', width: '94%' }"
  />
</template>

<script>
  import { ChartResizeMixin } from '@/mixins/ChartResizeMixin'
  import * as echarts from 'echarts';

  export default {
    name: 'ConsumptionBar',
    mixins: [ChartResizeMixin],
    props: {
      actionList: {
        type: Array,
        default: () => ([])
      }
    },
    watch: {
      actionList(val) {
        if (val) {
          this.drawChart()
        }
      }
    },
    mounted() {
      this.drawChart()
    },
    methods: {
      drawChart() {
        this.chart = echarts.init(document.getElementById('consumptionBar'))
        const option = {
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            left: "center",
            top: 'top',
            data: ['操作总次数', '成功次数', '失败次数'],
          },
          grid: {
            left: '3%',
            right: '6%',
            containLabel: true,
          },
          color: ['#03bec2', '#03c239', '#b12c03'],
          xAxis: {
            name: '操作类型',
            type: 'category',
            data: this.actionList.map(item => item.operateTypeName),
            axisLine: {
              lineStyle: {
                color: "#999999"
              }
            },
          },
          yAxis: {
            name: '操作次数',
            type: 'value',
            nameLocation: "end",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#999999"
              },
            },
            axisLine: {
              lineStyle: {
                color: "#999999"
              }
            },
          },
          series: [{
            name: '操作总次数',
            type: 'bar',
            data: this.actionList.map(item => item.total),
            barGap: "8%",
          }, {
            name: '成功次数',
            type: 'bar',
            data: this.actionList.map(item => item.success),
            barGap: "8%",
          }, {
            name: '失败次数',
            type: 'bar',
            data: this.actionList.map(item => item.fail),
            barGap: "8%",
          }],
        }

        this.chart.setOption(option)
      },
    }
  }
</script>